<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <style>
        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        /* 入场前的时间段 */
        .change-enter-active {
            transition: all .3s ease;
        }

        /* 离场前时间段 */
        .change-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .change-enter,
        .change-leave-to

        /* .slide-fade-leave-active for below version 2.1.8 */
            {
            transform: translateX(150px);
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <button type="button" @click="handle()">操作</button>
        <transition name="change">
            <h3 v-if="flag">vue的动画是什么样</h3>
        </transition>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {
                handle() {
                    this.flag = !this.flag
                },
            }
        })

    </script>
</body>

</html>